<template>
	<scroll-view :scroll-into-view="topItem" class="scroll-cont" scroll-y="true" @scroll="handleScroll">
		<view>
			<view class="" id="top"></view>
			<!-- 通用组件 -->
			<nav-custom></nav-custom>
			<!-- 轮播 -->
			<swiper class="banner" :indicator-dots="true" :autoplay="true" indicator-active-color="#ffe32a"
				:interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in banner" :key="item.objectId"  @click="handleBanner(item.link)">
					<!-- :key 唯一id -->
					<view class="swiper-item" >
						<image :src="item.img"> </image>
					</view>
				</swiper-item>

			</swiper>
			<home-title title="本季推荐" enTitle='Sasdasdasd' enTit='asdasd'></home-title>
			<scroll-view scroll-x="true" >
				<view class="scroll-inner">
					<image src="../../static/logo.png" mode="heightFix"></image>
					<image src="../../static/logo.png" mode="heightFix"></image>
					<image src="../../static/logo.png" mode="heightFix"></image>
				</view>
			</scroll-view>
			<home-title title="法式经典" enTitle='Sasdasdasd' enTit='asdasd'></home-title>
			<image src="../../static/logo.png" class="classf" mode=""></image>

			<view class=" flex flex-wrap padding-sm justify-between">
				<good-item v-for="(item,index) in 4"></good-item>
			</view>


			<view class="back-top" v-if="isShow" @click="handTop">
				<text class="iconfont icon-dingwei"></text>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {$http} from '../../utils/request.js'
	export default {
		data() {
			return {
				isShow: false,
				topItem:'',
				banner:[],
				banner1:[]
			}
		},
		methods: {
			handleScroll(ev) {
				// console.log(ev);
				let {scrollTop} = ev.detail
				this.isShow = scrollTop>500
				this.topItem = ' '
			},
			handTop(){
				this.topItem = 'top'
			},
			handleBanner(link){
				console.log(link)
				uni.navigateTo({
					url:`./banner_ad?link=${link}`
					
				})
			}
			
		},
		onLoad() {
			//方法一
			// uni.request({
			// 	url:'https://r5ctn9z9.lc-cn-n1-shared.com/1.1/classes/classify',//域名
			// 	method:'GET',//发送请求
			// 	header:{
			// 		"X-LC-Id": "r5CTN9z96pCW8mI8fx9YxOmw-gzGzoHsz" ,
			// 		"X-LC-Key": "8gSsl4Sz0ILMiQeMNMA8xQqg" ,
			// 		 "Content-Type": "application/json"
			// 	},
			// 	success: (res) => {
			// 		console.log(res);
			// 	}
				
			// })
			
			//方法二
			// $http('/1.1/classes/classify').then(res=>{
			// 	console.log(res);
			// })
			
			//方法三
			// this.$get('/1.1/classes/classify').then(res=>{
			// 	console.log(res);
			// })
			
			this.$get('/1.1/classes/banner').then(res=>{
				console.log(res)
				this.banner = res.results
			}),
			this.$get('/1.1/classes/banner1').then(res=>{
				console.log(res)
				this.banner1 = res.results
			})
		}
	}
</script>

<style lang="scss">
	.banner {
		height: 1000upx;

		swiper-item {
			height: 1000upx;
		}

		image {
			width: 100%;
			height: 1000upx;
		}
	}

	.scroll-inner {
		white-space: nowrap;

		image {
			height: 290upx;

		}
	}

	.classf {
		height: 380upx;
		width: 100%;
	}

	// 返回顶部
	.back-top {
		height: 100upx;
		width: 100upx;
		background-color: #fff;
		border-radius: 50%;
		box-shadow: 0 0 30upx 4upx rgba(0, 0, 0, 4);
		position: fixed;
		bottom: 40upx;
		right: 20upx;
		text-align: center;
		line-height: 100upx;
	}

	.scroll-cont {
		height: 100vh;
	}
</style>
